<template>
    <div class="bg">
        <div class="model">
        <div id="header">
            <div style="height:5px"></div>
            <el-row>
                <el-col :span="12">
                    <div style="width: 40px;float: left;margin-left: 100px;padding-top: 2px">
                        <img src="./../assets/img/logo.png" height="80">
                    </div>
                </el-col>
                <el-col :span="12" >
                    <div class="text-right" style="padding-top: 2px">
                        <img src="./../assets/img/logo-right.jpg" height="80">
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="login-wrap">
            <div class="wrap clearfix">
                <div style="width: 50%;text-align: center;float: left;color: #989fa3">
                    <!-- <div style="margin-top: 15%"></div> -->
                    <!-- <i class="icon icon-shoushi" style="font-size: 150px;"></i> -->
                    <!-- <p style="font-size: 30px;letter-spacing:8px;">打造卓越的品质新零售服务体系</p>
                    <p style="font-size: 28px;letter-spacing:3px;">树立具有竞争力的服务行业标准</p>
                    <p style="font-size: 20px;letter-spacing:5px;">安全·快捷·营销·精准</p><br>
                    <span style="font-size: 18px;padding: 10px 30px;color:#FFF;background-color:#16685D;color:#b9d2cf">
                        快速入驻
                    </span> -->
                </div>

                <div class="center-center" style="height: 100%;float: right;">
                    <div class="form-box fr loginV2 "  style="display:block;">
                        <ul class="form-tab clearfix">
                            <li class="tab-li" v-bind:class="{'cur':selectTab=='1'}" @click="selectTab='1'"><div  v-bind:class="{'left-border':selectTab!='1'}">管理员登录<i class="icon"></i></div></li>
                            <li class="tab-li" v-bind:class="{'cur':selectTab=='2'}" @click="selectTab='2'"><div  v-bind:class="{'right-border':selectTab!='2'}">员工登录</div></li>
                        </ul>
                        <div class="form-con" v-if="selectTab=='1'">
                            <div class="login-normal" style="display:block;">
                                <div class="form-error" style=""><i></i><label class="text"></label></div>
                                <dl class="clearfix">
                                    <dt>账户名：</dt>
                                    <dd><input type="text" placeholder="请输入手机号" class="input-text" v-model="account" ></dd>
                                </dl>
                                <dl class="top1 clearfix">
                                    <dt>密<em></em>码：</dt>
                                    <dd><input placeholder="请输入密码" class="input-text" v-model="pwd" type="password"><span class="placeholder"></span></dd>
                                </dl>
                                <dl class="top1 clearfix">
                                    <dt>验证码：</dt>
                                    <dd>
                                        <input type="text" @keyup.enter="goLogin" class="input-yzm"  autocomplete="off" v-model="captcha">
                                        <span class="span-yzm">
                                            <img style="height: 30px" :src="jcaptcha" title="点击图片刷新校验码" alt="点击图片刷新校验码" @click="changeImg">
                                        </span>
                                    </dd>
                                </dl>
                                <div class="btn-box clearfix">
                                    <button class="btn-settlement" type="button"  @click="goLogin">登    录</button>
                                </div>
                                <div class="link-box clearfix">
                                    <br>
                                    <a href="javascript:;" class="register" tjjj="passport.login.fstreg" @click="goRegister">新用户注册</a>
                                    <a href="javascript:;" class="forget-pass" tjjj="passport.forget.password">忘记密码？</a>
                                </div>
                            </div>
                        </div>
                        <div v-if="selectTab=='2'" >
                            <div class="form-con">
                                <div class="login-normal" style="display:block;">
                                    <div class="form-error" style=""><i></i><label class="text"></label></div>
                                    <dl class="clearfix">
                                        <dt>管理员：</dt>
                                        <dd><input type="text" placeholder="请输入管理员账号"  class="input-text" v-model="adminAccount" ></dd>
                                    </dl>
                                    <dl class="clearfix">
                                        <dt>账号：</dt>
                                        <dd><input type="text" placeholder="请输入员工账号"  class="input-text" v-model="comAccount" ></dd>
                                    </dl>
                                    <dl class="top1 clearfix">
                                        <dt>密码：</dt>
                                        <dd><input type="password" placeholder="请输入密码" class="input-text" v-model="comPwd" ></dd>
                                    </dl>
                                  <dl class="top1 clearfix">
                                    <dt>验证码：</dt>
                                    <dd>
                                      <input type="text" @keyup.enter="goLogin" class="input-yzm"  autocomplete="off" v-model="captcha">
                                      <span class="span-yzm">
                                            <img id="smsCaptchaImage" style="height: 30px" :src="jcaptcha" title="点击图片刷新校验码" alt="点击图片刷新校验码" @click="changeImg">
                                        </span>
                                    </dd>
                                  </dl>
                                    <div class="btn-box clearfix">
                                        <button class="btn-settlement" type="button"  @click="goLogin">登    录</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       <div id="jia_footer">
            <div class="jia_foot_info">
                <div class="jia_foot_con">
                    <p class="jia_foot_link">
                    <a href="javascript:;" target="_blank" rel="nofollow">企业文化</a><span class="jia_split">|</span> <a href="javascript:;/link.html" target="_blank" rel="nofollow">友情链接</a><span class="jia_split">|</span> <a href="javascript:;/jmtg/index.html" target="_blank" rel="nofollow">加盟秦晔</a><span class="jia_split">|</span><a href="javascript:;/help/0055.html" target="_blank" rel="nofollow">诚聘英才</a><span class="jia_split">|</span> <a href="javascript:;/help/0033.html" target="_blank">网站地图</a><span class="jia_split">|</span> <a href="javascript:;/app/" rel="nofollow" target="_blank">手机秦晔</a><span class="jia_split">|</span>  <a href="javascript:;/help/" tjjj="bottom.link.help">帮助中心</a><span class="jia_split">|</span> <a href="javascript:;" class="jia_foot_open">更多<i></i></a>
                    </p>
                </div>
                <p>
                        <strong style="padding-left: 10px">Copyright</strong> © 2007-2018  版权所有归属：西安秦晔信息技术有限公司
                </p>
                <p>
                    备案号：陕ICP备16001940号
                </p>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
  const saveTiket=(data)=>{
    window.localStorage.setItem('accountName',data.content.accountName)
    window.localStorage.setItem('securityKey',data.content.securityKey)
    window.localStorage.setItem('accessToken',data.content.accessToken)
    window.localStorage.setItem("accountRealName",data.content.accountRealName)
    window.localStorage.setItem("headUrl",data.content.headUrl)
    window.localStorage.setItem("lastLoginDate",data.content.lastLoginDate)
    window.localStorage.setItem("permissions",JSON.stringify(data.content.permissions));
    window.localStorage.setItem("roles",JSON.stringify(data.content.roles));
    window.localStorage.setItem("admin",data.content.admin);

  }
    //注意路径
    export default{
        data(){
            return {
                account:"",     //13720739037
                pwd:"",     //123456
                adminAccount:"",
                comAccount:"",
                comPwd:"",
                jcaptcha:"",
                captcha:"",
                selectTab:"1"
            }
        },
        watch:{
            selectTab:function(newValue,oldValue){
                this.account="",        //13720739037
                this.adminAccount="",       //13720739037
                this.pwd="",        //123456
                this.comAccount="",     //0000
                this.comPwd="",     //12345678
                this.captcha=""
            }
        },
        created(){
            window.this = this;
            this.changeImg();
        },
        methods: {
            goBack() {
                this.router.go(-1);
            },
            goRegister(){
              //去注册
                this.router.push({path:"/register"});
            },
            changeImg(){
                var $this=this;
              this.$axios.get("jcaptcha","",false).then((data)=>{
                    $this.jcaptcha=data.content
                })
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                  /*     /*adminAccount:this.adminAccount,account:this.comAccount,password:this.comPwd,captcha:this.captcha*/
                  //formData
                  this.$axios.post("signin",{account:this.account,password:this.pwd,captcha:this.captcha},"",false).then((data)=>{
                    if(data.status==200){
                      saveTiket(data)
                      this.router.push({path:"/"});
                    }
                  }).catch(function(err){
                    console.log(err);
                  })
                }
            },
            goLogin(){
                var $this=this;
                if(this.selectTab=='1'){
                  //管理员登录
                    if(this.account==""){
                        this.$message.error("请输入账号");
                        return;
                    }
                    if(this.pwd==""){
                        this.$message.error("请输入密码");
                        return;
                    }
                  this.$axios.post("signin",{account:this.account,password:this.pwd,captcha:this.captcha},"",false).then((data)=>{
                    if(data.status==200){
                      saveTiket(data)
                      console.log("========登录完成")
                      this.router.push({path:"/"});
                    }else {
                      this.$message({
                        message:data.message,
                        type: 'error'
                      });
                      this.changeImg();
                    }
                  }).catch(function(err){
                    console.log(err);
                  })
                }else{
                    //员工登录
                    if(this.adminAccount==""){
                        this.$message.error("请输入管理员账号");
                        return;
                    }
                    if(this.comAccount==""){
                        this.$message.error("请输入员工账号");
                        return;
                    }
                    if(this.comPwd==""){
                        this.$message.error("请输入密码");
                        return;
                    }
                  this.$axios.post("signin",{adminAccount:this.adminAccount,account:this.comAccount,password:this.comPwd,captcha:this.captcha},"",false).then((data)=>{

                      if(data.status==200){
                        saveTiket(data)
                        this.router.push({path:"/"});
                       }else{

                        this.$message({
                          message:data.message,
                          type: 'error'
                        });
                        this.changeImg();
                       }
                   })
                }
            }
        }
    }
</script>
<style scoped>
    .bg{
        z-index: 10;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0px;
        background-color: #FFF;
        left: 0px;
    }
    .login{
        background-color: rgba(255,255,255,0.7);
        margin-top: 20vh;
        height: 50vh;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    }
    #header {
        background: #fff;
        height: 92px;
        padding-top:230px;
        padding: 0;
    }
    .login-wrap {
        width: 100%;
        height: 72vh;
        background: url("./../assets/img/login_bg.jpg") center/cover no-repeat;
        /*background-size: 1920px 659px;*/
        overflow-x: hidden;
    }
    .login-wrap .wrap {
        min-width: 998px;
        height: 100%;
        padding: 0 115px;
        margin: 0 auto;
        overflow-y: hidden;
    }
    .login-wrap .form-box {
        width: 400px;
        min-height: 410px;
        background: #fff;
    }
    .fr {
        float: right;
    }
    .shortLogin {
        display: none;
    }
    .form-box .form-tab {
        height: 50px;
        font-family: "Microsoft YaHei";
        padding: 0;
        margin: 0;
    }
    ul, ol {
        list-style: none;
    }
    .form-tab .tab-li {
        float: left;
        width: 50%;
        height: 50px;
        cursor: pointer;
      border-bottom:2px solid #ddd;
        /*background-color: #DDD;*/
    }
    .form-tab .tab-li div{
        position: relative;
        display: block;
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: #666;
        text-decoration: none;
    }
    .form-tab .cur {
        /*background-color: #FFF;*/
      border-bottom-color: #1ab394;

    }
    .form-tab .cur a{
        color: rgb(13, 98, 77) !important;
    }
    .loginV2 .form-con {
        width: 100%;
        height: auto;
        padding: 0;
    }
    .loginV2 .login-normal{
        width: 80%;
        padding: 20px 40px 0;
    }
    #nameLoginForm{
        margin: 0;
        padding: 0;
    }
    .form-box dl {
        position: relative;
        height: 20px;
        line-height: 20px;
        padding: 16px 0;
        border: 1px solid #ddd;
        font-family: "Microsoft YaHei";
        font-size: 14px;
    }
    .loginV2 dl {
        padding: 12px 0;
    }
    .form-box dt {
        float: left;
        width: 60px;
        height: 20px;
        line-height: 20px;
        padding-left: 20px;

    }
    .form-box dd {
        position: relative;
        float: left;
        height: 20px;
        line-height: 20px;
    }
    .loginV2 dd, .shortLogin dd {
        margin: 0;
        padding: 0;
    }
    .form-box .placeholder {
        position: absolute;
        height: 20px;
        line-height: 20px;
        left: 10px;
        z-index: 1;
        color: #ccc;
    }
    .form-box .input-text{
        position: absolute;
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        left: 0;
        z-index: 2;
        background: transparent;
        outline: 0 none;
        color: #333;
        width: 180px;
        border: 0 none;
    }
    .form-box .input-yzm{
        position: absolute;
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
        left: 0;
        z-index: 2;
        background: transparent;
        outline: 0 none;
        color: #333;
        width: 90px;
        border: 0 none;
    }
    .span-yzm{
      position: absolute;
      left: 95px;
      line-height: 20px;
      padding: 0 10px;
      width: 130px;

    }

    .loginV2 .form-remember {
        padding: 11px 0 17px;
    }
    .form-remember .rem-check {
        display: none;
        height: 13px;
        border: 0 none;
        width: 13px;
    }
    .form-remember .rem-box-r {
        margin-left: 0px;
    }
    .form-remember .memCheck {
        background-position: 0 -13px;
        color: #666;
    }
    .loginV2 .btn-box{
        height: 40px;
        color: #666;
    }
    .btn-settlement {
        float: left;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background-color: #0d624d;
        outline: 0 none;
        font-family: "Microsoft YaHei";
        cursor: pointer;
        border: 0 none;
    }
    .loginV2 .link-box .register {
        float: left;
        color: #007fd7;
        margin-bottom: 10px;
    }
    .loginV2 .link-box .register {
        float: left;
        color: #007fd7;
        width: 72px;
        line-height: 34px;
        font-family: "Microsoft YaHei";
    }
    .loginV2 .link-box .forget-pass{
        float: right;
        width: 72px;
        line-height: 34px;
        font-family: "Microsoft YaHei";
        color: #007fd7;
        font-size: 12px;
    }
    .loginV2 .login-short {
        padding-top: 18px;
        padding-bottom: 12px;
        margin: 0;
        border-top: 1px dotted #ddd;
    }
    .loginV2 .short-left {
        float: left;
        width: 150px;
    }
    .loginV2 .short-right {
        float: left;
        width: 124px;
        padding-left: 25px;
        border-left: 1px dotted #ddd;
    }
    .loginV2 .login-short h3 {
        padding: 0 0 12px 0;
    }
    .login-short h3 {
        font-size: 12px;
        line-height: 1;
        padding: 17px 0 13px;
        color: #666;
    }
    .loginV2 .login-short li {
        margin-right: 16px;
        padding: 0;
        list-style: none;
    }
    .login-short .qq {
        background-position: -13px -24px;
    }
    .login-short li a {
        display: block;
        height: 33px;
    }
    .login-short li {
        float: left;
        height: 33px;
        width: 33px;
        margin-right: 18px;
        background: url(../assets/img/member.png) -13px -24px no-repeat;
    }
    .loginV2 .login-short .phone-short .phone {
        float: left;
        height: 33px;
        width: 33px;
        margin-right: 7px;
        background: url(../assets/img/member.png) -115px -57px no-repeat;
    }
    #jia_footer {
        height: 29vh;
        background-color: #fff;
    }
    .jia_foot_info {
        text-align: center;
        color: #666;
    }
    .jia_foot_info p {
        line-height: 24px;
        color: #aaa;
    }
    #jia_footer .jia_foot_link {
        padding: 10px 0;
        text-align: center;
    }
    #jia_footer a {
        color: #999;
    }
    .jia_foot_info .jia_foot_link a {
        color: #333;
        padding: 0 15px;
    }
    .model{
    }
    .left-border{
        /*border-right: 1px solid #EBEBEB;*/
        /*border-bottom: 1px solid #EBEBEB;*/
    }
    .right-border{
        /*border-left: 1px solid #EBEBEB;*/
        /*border-bottom: 1px solid #EBEBEB;*/
    }
</style>
